<script>
export default {
  props: {
    msg: {
      type: Object,
      default: function() {
        return { type: "0" };
      }
    }
  },
  data() {
    return {
      context: {
        title: "",
        createTime: "",
        msgContent: { textContent: { content: "" } }
      },
      visible: false
    };
  },
  computed: {
    session() {
      let { sessions, currentSessionId } = this.$store.state.messageCenter;
      let result = sessions.find(
        session => session.source === currentSessionId
      );
      return result;
    }
  },
  methods: {
    viewBlog(url) {
      window.open(url, "_blank");
    },
    viewText(msg) {
      this.context = msg;
      this.visible = true;
    },
    viewShenpi(msg) {
      window.postMessage({ type: "flow", command: "open" }, "*");
    },
    onClose() {
      this.visible = false;
    }
  },
  filters: {
    time(date) {
      if (!date) return "";
      if (typeof date === "string") {
        date = new Date(date);
      }
      return `${date.getFullYear()}-${
        date.getMonth() + 1 >= 10
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1)
      }-${date.getDate() >= 10 ? date.getDate() : "0" + date.getDate()}
       ${date.getHours() >= 10 ? date.getHours() : "0" + date.getHours()} : ${
        date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes()
      } : ${
        date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds()
      }`;
    }
  }
};
</script>

<template>
  <div>
    <!-- 文本消息 -->
    <div class="text-msg" v-if="msg.type==='1'">
      <div class="c-title">{{ msg.title }}</div>
      <p class="c-time">
        <span>{{ msg.sendTime }}</span>
      </p>
      <div class="c-text">{{ msg.msgContent['textContent']['content'] }}</div>
    </div>
    <!-- 多文本 -->
    <div class="text-msg" v-if="msg.type==='2'">
      <div class="c-title">{{ msg.title }}</div>
      <p class="c-time">
        <span>{{ msg.sendTime }}</span>
      </p>
      <div class="c-text">{{ msg.msgContent['textContent']['content'] }}</div>
      <div class="c-footer" @click="viewText(msg)">
        查看详情
        <span>></span>
      </div>
    </div>

    <!-- 图文消息 -->
    <div class="text-msg" v-if="msg.type==='3'">
      <div class="c-title">{{ msg.title }}</div>
      <p class="c-time">
        <span>{{ msg.sendTime }}</span>
      </p>
      <div class="c-text">
        <p>{{ msg.msgContent['textContent']['content'] }}</p>
        <p class="c-img">
          <img :src="msg.image" alt="msg.title">
          <span class="c-img-filter"></span>
        </p>
      </div>
      <div class="c-footer" @click="viewBlog(msg.sendUrl)">
        查看详情
        <span>></span>
      </div>
    </div>
    <!-- 审批消息 -->
    <div class="text-msg" v-if="msg.type==='4'">
      <div class="c-title">{{ msg.title }}</div>
      <p class="c-time">
        <span>{{ msg.sendTime }}</span>
      </p>
      <div class="c-text">
        <p>{{ msg.msgContent['formContent']['content'] }}</p>
        <div class="c-item">
          <span>审批类型：</span>
          {{msg.msgContent.formContent['formContents']['type']}}
        </div>
        <div class="c-item">
          <span>发起人：</span>
          {{msg.msgContent.formContent['formContents']['faqi']}}
        </div>
        <div class="c-item">
          <span>提交时间：</span>
          {{msg.msgContent.formContent['formContents']['start']}}
        </div>
      </div>
      <div class="c-footer" @click="viewShenpi(msg)">
        查看详情
        <span>></span>
      </div>
    </div>
    <!-- 抽屉查看详情 -->
    <a-drawer
      :title="session.sourceName"
      :body-style="{padding:'20px'}"
      placement="right"
      width="460"
      :visible="visible"
      @close="onClose"
    >
      <div class="draw-msg">
        <div class="c-title">{{ context.title }}</div>
        <p class="c-time">
          <span>{{ context.sendTime }}</span>
        </p>
        <p>{{context['msgContent']['textContent']['content']}}</p>
      </div>
    </a-drawer>
  </div>
</template>


<style lang="less" scoped>
.text-msg {
  display: inline-block;
  position: relative;
  padding: 16px 16px 0;
  width: 620px;
  min-height: 30px;
  font-size: 16px;
  color: #333333;
  text-align: left;
  word-break: break-all;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.04);

  &:before {
    content: " ";
    position: absolute;
    top: 9px;
    right: 100%;
    border: 6px solid transparent;
    border-right-color: #ffffff;
  }

  .c-title {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
  }

  .c-time {
    font-size: 12px;
    color: #bcbfcb;
  }
  .c-text {
    font-size: 14px;
    color: #666666;
    padding-bottom: 16px;
    .c-item {
      color: #bcbfcb;
      font-size: 12px;
      line-height: 26px;
      span {
        width: 60px;
        display: inline-block;
      }
    }
  }
  .c-img {
    position: relative;
    img {
      width: 100%;
    }
    .c-img-filter {
      position: absolute;
      width: 100%;
      height: 150px;
      left: 0;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 30%,
        #ffffff 100%
      );
      bottom: 0px;
    }
  }

  .c-footer {
    height: 45px;
    line-height: 40px;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    border-top: 1px solid #eeeeee;
    & > span {
      float: right;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.25);
    }
  }
}
.draw-msg {
  text-align: left;
  padding: 0 10px;
  .c-title {
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    text-align: center;
  }

  .c-time {
    font-size: 12px;
    color: #bcbfcb;
    text-align: center;
  }
}
</style>



